<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <link href="${pageContext.request.contextPath}/css/customer/customer_collection.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/dist/layui/css/layui.css">
</head>
<body>
<script>
    var customer = '<%=request.getSession().getAttribute("loginCustomer")%>';
    console.log("++++++++++++++++++++++" + customer);
    let custId = ${loginCustomer.custId};
    console.log("custId:" + custId);
    if (custId == null){
        custId = ${custId};
        console.log("=========================" + custId);
    }
</script>
<!--====================头部导航条==================================-->
<div class="topBarC">
    <div class="logo">
        <a href="${pageContext.request.contextPath}/index.jsp" title="首页">首页</a>
    </div>

    <div class="t_nav">
        <ul class="t_nav_ul">
            <li>
                <strong class="t">
                    <a href="${pageContext.request.contextPath}/index.jsp">首页</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="${pageContext.request.contextPath}/destination/destination_index.jsp">目的地</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">自友行</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">旅游定制</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">游记社区</a>
                </strong>
            </li>


        </ul>
    </div>

    <div class="t_search">
        <form method="get" name="search">
            <input type="text" class="key">
            <input type="submit" class="btn" value="">
        </form>
    </div>

</div>

<!--====================头部背景图===================================-->
<div class="container">
    <div class="banner">
        <div class="banner_img banner_extra"></div>
    </div>
</div>

<!--====================背景图底部个人中心列表============================-->
<div class="tags_bar second_tags_bar">
    <div class="center">
        <div class="Mavater">
            <div class="MAvaImg flt1">
                <img width="120px" height="120px" src="http://p1-q.mafengwo.net/s12/M00/35/6C/wKgED1uqIpCARLIhAAAZUeRPlFM676.png?imageMogr2%2Fthumbnail%2F%21120x120r%2Fgravity%2FCenter%2Fcrop%2F%21120x120%2Fquality%2F90"/>
            </div>
        </div>
        <ul class="flt2">

            <li>
                <a href="${pageContext.request.contextPath}/customer/customermain.jsp"  class="tags_link">我的沃</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/myorder/myorder_center.jsp"  class="tags_link">我的订单</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/customer/customer_notes.jsp"  class="tags_link">我的游记</a>
            </li>
<%--            <li>--%>
<%--                <a href="${pageContext.request.contextPath}/customer/customer_review.jsp"  class="tags_link">我的评价</a>--%>
<%--            </li>--%>
            <li>
                <a href="${pageContext.request.contextPath}/customer/customer_collection.jsp"  class="tags_link">我的收藏</a>
            </li>
        </ul>
    </div>

</div>

<!--=====================底部一级列表及对应的二级列表=====================-->
<div class="wrapper">
    <div class="home-extra">
        <div class="s-menu">
            <ul class="clearfix">

                <li>
                    <a href="${pageContext.request.contextPath}/myorder/myorder_center.jsp">我的订单</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/customer/customer_notes.jsp">我的游记</a>
                </li>
                <li>
<%--                    <a href="${pageContext.request.contextPath}/customer/customer_review.jsp">我的评价</a>--%>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/customer/customer_collection.jsp">我的收藏</a>
                </li>
            </ul>
        </div>


        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">游记收藏</li>
                <li>景点收藏</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!--=================================游记收藏内容========================================-->
                    <c:forEach var="response2" items="${response2.data}">
                    <div class="favPost">
                        <ul class="favlist">
                            <form>

                                <li class="post_item">
                                    <!--游记收藏表图片-->
                                    <div class="pic">
                                        <a href="">
                                            <img src="${pageContext.request.contextPath}/images/customer/note_collect1.jpg"/>
                                        </a>
                                    </div>
                                    <dl class="clearfix">
                                        <dd>
                                            <h2>
                                                <a href=""> ${response2.travelNotesTitle}</a>
                                            </h2>
                                            <div class="author">
                                                <p class="authorA">
                                                    <a href="" target="_blank"><img src=""></a>作者：<a href="" target="_blank">罗嘎,</a>
                                                </p>
                                                <p class="authorB"><a href="" target="_blank"><img src="${response2.travelNotesMainImg}></a>回复：<a href="" target="_blank"></a> 2021-10-13 22:53:04</p>
                                            </div>

                                            <div class="post_info">
                                                <p>
                                                        ${response2.travelNotesText}
                                                </p>
                                            </div>
                                        </dd>
                                    </dl>
                                </li>
                            </form>
                        </ul>
                    </div>
                    </c:forEach>
                </div>

                    <div class="layui-tab-item">
                        <c:forEach var="response" items="${response.data}">
                        <div class="p-country">
                    <div class="p-hd">
                            ${response.travelSightsLocProvince}
                    </div>
                    <div class="p-item">
                        <div class="p-item-main clearfix">
                            <div class="p-content">
                                <div class="img"><a href="#" target="_blank"><img src="${response.travelSightsMainImg}" width="140" height="90"></a></div>
                                <div class="p-title">
                                    <a href="#" target="_blank"><strong>${response.travelSightsLocCity}</strong></a>
                                </div>
                                <p style="visibility: hidden" class="favtip">该目的地收藏了<em>0</em>个POI</p>
                                <p class="summary">${response.travelSightsDescribe}</p>

                            </div>
                        </div>
                        <div class="p-item-poi hide">
                        </div>
                    </div>
                </div></c:forEach>
<%--                        <div class="pageInfo">--%>
<%--                            共有<span>${response.data.total}</span>条记录，--%>
<%--                            <c:if test="${response.data.pageNum !=1}">--%>

<%--                                <a href="${pageContext.request.contextPath}/customer_collection/{custId}/page/${response.data.pageNum-1}">上一页</a>，--%>
<%--                            </c:if>--%>

<%--                            当前是第 <span>${response.data.pageNum}</span>页，--%>

<%--                            <c:if test="${response.data.pageNum != response.data.pages}">--%>
<%--                                <a href=""></a>--%>
<%--                                <a href="${pageContext.request.contextPath}/customer_collection/{custId}/page/${response.data.pageNum+1}" >下一页</a>，--%>
<%--                            </c:if>--%>

<%--                            共有<span>${response.data.pages}</span>页--%>
<%--                        </div>--%>


                    </div>



                <div class="layui-tab-item">内容3</div>
                <div class="layui-tab-item">
                    <div class="favPost">
                        <ul class="favlist">
                            <form>

                            </form>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="${pageContext.request.contextPath}/dist/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
</script>
</body>
</html>